/**
 * Created by guiyongdong on 2017/7/4.
 */

import React, {Component} from 'react';
import './Example.css';
import ExampleData from './ExampleData';
import Utils from '../Utils';
import {Link} from 'react-router-dom';

export default class Example extends Component {


    render() {

        let style = {};
        let top = -200;
        if (!Utils.IsPhone()) {
            let w = (document.body.clientWidth-30*4)/3;
            if (w < 300) w = 300;
            let h = w*2/3;
            top = -h;
            style={width:w, height:h};
        }

        let views = [];
        for (let i=0;i<ExampleData.length;i++) {
            let data = ExampleData[i];
            views.push(
                <Link key={i} to={{pathname:'/detail/'+i}} target="bank">
                    <div className="ExampleItemView" style={style}>
                        <img  src={data.image} className="ExampleImage"/>
                        <div className="ExampleItem" style={{marginTop:top}}>
                            <p style={{color:"white",fontSize:25}}>{data.title}</p>
                            <p style={{color:"white",fontSize:15,marginLeft:10,marginRight:10,marginTop:5}}>{data.message}</p>
                        </div>
                    </div>
                </Link>

            );
        }


        return(
            <div className="Example">
                <div className="ExampleHead">
                    <p style={{fontSize:25, color:"#464646",marginTop:30}}>案例展示</p>
                    <p style={{fontSize:15, color:"#828282",marginTop:5,marginBottom:30}}>用心做好每一款APP！</p>
                </div>


                <div className="ExampleView">
                    {views}
                </div>

            </div>
        );
    }
}